<template>
  <div>
    <ProspectForm
      v-if="step >= 1"
      @openSave="openSaveProspect"
      @openDelete="openDeleteProspect"
      ref="prospectForm"
      :show-action="step !== 1"
      class="elevation-0"
    ></ProspectForm>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :show-save="false"
      width="480"
    >
      <template>
        <Save v-if="[1, 2].includes(step)" @submit="saveProspect"></Save>
        <Delete
          v-else-if="step === 3"
          @delete="deleteProspect(selectedProspect)"
          :title="deleteTitle"
        ></Delete>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import ProspectForm from "@/components/Customer/Prospect/ProspectForm.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import Delete from "@/components/Customer/Dialog/Delete/Delete.vue";
import Save from "@/components/Customer/Dialog/Save/Save.vue";
import { IProspect } from "@/components/Customer/index";
@Component({
  components: {
    ProspectForm,
    Dialog,
    Delete,
    Save,
  },
})
export default class Prospect extends Vue {
  // 1.AddProspect 2.EditProspect 3.DeleteProspect
  get step() {
    return this.$store.state.ProspectStore.step;
  }
  set step(step: number) {
    this.$store.commit("ProspectStore/setStep", step);
  }
  @Watch("step")
  onStepChange(step: number) {
    if (step === 1) {
      const prospectFormRef = this.$refs.prospectForm as ProspectForm;
      prospectFormRef.resetForm();
      // 重置校验提示
      prospectFormRef.$validator.reset();
    }
  }
  // loading
  startLoadingMenu() {
    this.$store.commit("CustomerStore/startLoadingMenu");
  }
  endLoadingMenu() {
    this.$store.commit("CustomerStore/endLoadingMenu");
  }
  startLoadingContent() {
    this.$store.commit("CustomerStore/startLoadingContent");
  }
  endLoadingContent() {
    this.$store.commit("CustomerStore/endLoadingContent");
  }
  // Dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  deleteTitle = "Are you sure to delete the prospect?";
  // prospect
  get prospectList(): IProspect[] {
    return this.$store.state.ProspectStore.prospectList;
  }
  get selectedProspect() {
    return this.$store.state.ProspectStore.selectedProspect;
  }
  set selectedProspect(prospect: IProspect) {
    this.$store.commit("ProspectStore/setSelectedProspect", prospect);
  }
  setProspectList() {
    this.startLoadingMenu();
    setTimeout(() => {
      const prospectList: IProspect[] = [
        {
          id: "1",
          prospectNumber: "PP-22015",
          customerName: "Cafe De Coral",
          contactPerson: "Mr. Jimmy Chan",
          jobTitle: "Director",
          mobileNumber: "12345678",
          work: "12345678",
          fax: "12345678",
          email: "jimmy.tin@cafedecoral.com",
        },
        {
          id: "2",
          prospectNumber: "PP-22016",
          customerName: "Tai Hing",
          contactPerson: "Mr. Jimmy Chan",
          jobTitle: "Director",
          mobileNumber: "12345678",
          work: "12345678",
          fax: "12345678",
          email: "jimmy.tin@cafedecoral.com",
        },
      ];
      this.$store.commit("ProspectStore/setProspectList", prospectList);
      // 设置默认选中第一项
      if (prospectList.length > 0) {
        this.$store.commit(
          "ProspectStore/setSelectedProspect",
          prospectList[0]
        );
      }
      this.endLoadingMenu();
    }, 900);
  }
  @Watch("selectedProspect")
  onSelectedProspectChange(selectedProspect: IProspect) {
    if (selectedProspect) {
      this.step = 2;
      this.startLoadingContent();
      this.$nextTick(() => {
        const prospectFormRef = this.$refs.prospectForm as ProspectForm;
        prospectFormRef.resetForm();
        setTimeout(() => {
          prospectFormRef.setFormData(selectedProspect);
          this.endLoadingContent();
        });
      });
    } else if (this.step !== 1) {
      this.step = -1;
    }
  }
  openSaveProspect() {
    if (this.selectedProspect && this.selectedProspect.id) {
      this.step = 2;
    }
    this.dialogTitle = "Save";
    this.openDialog();
  }
  async saveProspect() {
    const prospectFormRef = this.$refs.prospectForm as ProspectForm;
    const result = await prospectFormRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        this.addProspect(result as IProspect);
        this.selectedProspect = result;
      } else if (this.step === 2) {
        this.editProspect(result as IProspect);
      }
      this.closeDialog();
    }
  }
  addProspect(prospect: IProspect) {
    if (!prospect) {
      return;
    }
    return this.prospectList.push(prospect);
  }
  editProspect(prospect: IProspect) {
    if (this.selectedProspect && prospect) {
      Object.assign(this.selectedProspect, prospect);
    }
  }
  openDeleteProspect() {
    this.step = 3;
    this.dialogTitle = "Delete";
    this.openDialog();
  }
  deleteProspect(prospect: IProspect) {
    const index = this.prospectList.findIndex(
      (item) => item.id === prospect.id
    );
    if (index >= 0) {
      this.prospectList.splice(index, 1);
      this.closeDialog();
      this.step = -1;
    }
  }
  created() {
    this.setProspectList();
  }
}
</script>

<style lang="scss" scoped>
@import "@/views/04000000-Customer/ProspectCustomer/ProspectCustomer.scss";
</style>
